import React, { Component, Fragment } from 'react';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import {
  Modal,
  Row,
  Col,
  Input,
  Select,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;
interface infoProps extends FormComponentProps {
  addOrDelVisible: boolean;
  detailInfo: any;
  addOrDelType: number;
  showAddOrDelModal: (addOrDelVisible: boolean, type: number) => void;
  fetchAction: (typeName: string, payload?: any) => void;
}

class AddOrDelInfo extends Component<infoProps> {
  handleConfimchanfgeDesc = () => {
    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (errors) return;

      const { addOrDelType: type, detailInfo: { id } } = this.props;
      const { layoutLeft, layoutRight, descType } = values;
      const params = {
        id,
        descType,
        type,
        layout: `${layoutLeft}-${layoutRight}`,
      };

      const { fetchAction } = this.props;
      fetchAction('addOrUpdateSet', params);

      const { showAddOrDelModal } = this.props;
      showAddOrDelModal(false, 0);
    });
  }

  renderAddInfo = (getFieldDecorator: any) => (
    <Fragment>
      <Row>
        <Col md={18} sm={24}>
          <Item label="主柜左增加副柜" colon={false}>
            {getFieldDecorator('layoutLeft', { initialValue: 0 })(
              <Select placeholder="请选择">
                {[...new Array(8)].map((item: any, index: number) => (
                  <Option value={index} key={`${item + index}`}>{index}组</Option>
                ))}
              </Select>,
            )}
          </Item>
        </Col>
      </Row>
      <Row>
        <Col md={18} sm={24}>
          <Item label="主柜右增加副柜" colon={false}>
            {getFieldDecorator('layoutRight', { initialValue: 0 })(
              <Select placeholder="请选择">
                {[...new Array(8)].map((item: any, index: number) => (
                  <Option value={index} key={`${item + index}`}>{index}组</Option>
                ))}
              </Select>,
            )}
          </Item>
        </Col>
      </Row>
    </Fragment>
  )

  renderDelInfo = (detailInfo: any, getFieldDecorator: any) => {
    const { layout, cellInfo } = detailInfo;
    const left = cellInfo.length > 1 ? Number(layout.split('-')[0]) + 1 : 1;
    const right = cellInfo.length > 1 ? Number(layout.split('-')[1]) + 1 : 1;
    return (
      <Fragment>
        <Row>
          <Col md={18} sm={24}>
            <Item label="主柜左删除副柜" colon={false}>
              {getFieldDecorator('layoutLeft', { initialValue: 0 })(
                <Select placeholder="请选择">
                  {[...new Array(left)].map((item: any, index: number) => (
                    <Option value={index} key={`${item + index}`}>{index}组</Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
        </Row>
        <Row>
          <Col md={18} sm={24}>
            <Item label="主柜右删除副柜" colon={false}>
              {getFieldDecorator('layoutRight', { initialValue: 0 })(
                <Select placeholder="请选择">
                  {[...new Array(right)].map((item: any, index: number) => (
                    <Option value={index} key={`${item + index}`}>{index}组</Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
        </Row>
      </Fragment>
    );
  }

  render() {
    const {
      addOrDelVisible,
      showAddOrDelModal,
      detailInfo,
      addOrDelType,
      form: { getFieldDecorator },
    } = this.props;

    return (
      <Modal
        title="确认提示"
        visible={addOrDelVisible}
        destroyOnClose
        onOk={this.handleConfimchanfgeDesc}
        onCancel={() => showAddOrDelModal(false, 0)}
      >
        <Form hideRequiredMark className="tableListForm">
          <Row>
            <Col md={18} sm={24}>
              <Item label="　　　柜体布局" colon={false}>
                {getFieldDecorator('layout', {
                  initialValue: detailInfo.layout,
                })(<Input allowClear disabled style={{ width: '100%' }} />)}
              </Item>
            </Col>
          </Row>
          <Row>
            <Col md={18} sm={24}>
              <Item label="　　　硬件版本" colon={false}>
                {getFieldDecorator('hwareVersion', {
                  initialValue: detailInfo.hwareVersion,
                })(<Input allowClear disabled />)}
              </Item>
            </Col>
          </Row>
          <Row>
            <Col md={18} sm={24}>
              <Item label="　　　结构版本" colon={false}>
                {getFieldDecorator('structVersion', {
                  initialValue: detailInfo.structVersion,
                })(<Input allowClear disabled />)}
              </Item>
            </Col>
          </Row>
          {addOrDelType === 1
            ? this.renderAddInfo(getFieldDecorator)
            : this.renderDelInfo(detailInfo, getFieldDecorator)
          }
          <Row>
            <Col md={18} sm={24}>
              <Item label="　格口描述类型" colon={false}>
                {getFieldDecorator('descType', {
                  rules: [{ required: true, message: '请选择格口描述类型' }],
                })(
                  <Select placeholder="请选择格口描述类型">
                    <Option value={1}>字母: A1、B1</Option>
                    <Option value={2}>格口类型: 大1、小1</Option>
                    <Option value={3}>格口编号: 1号箱门、2号箱门</Option>
                  </Select>,
                )}
              </Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<infoProps>()(AddOrDelInfo);
